#{extends 'main.html' /} #{set title:'EditUser' /}
<head>
    <script type="text/javascript">
        $(function(usercurrent){
            $('#tableEditing').hide();
        });
       
    </script>
    <script type="text/javascript">
        function startEditing(usercurrent){
            $('#editUserInformationBtn').fadeOut(1000);
            editUserInfo(usercurrent);
            $('#tableEditing').fadeIn(1000);
        }
    </script>
    <script type="text/javascript">
        function finishEditing(usercurrent){
            $('#editUserInformationBtn').fadeIn(1000);
            $('#tableEditing').fadeOut(1000);
        }
    </script>
    <script type="application/javascript">
        function editUserInfo(usercurrent){
            $.getJSON('@{UsersController.editUserInfo()}', {
                'currentUser': document.getElementById("usercurrentHiddenInput").value,
                'username': document.getElementById("usercurrentHiddenInput").value
            }, function(data){
            
                if (data != null) {
                    document.getElementById("dropdowndiv").value = data.theme;
                    document.getElementById("addressTextArea").value = data.address;
                    //document.getElementById("browseImg").value = data.imagePath;
                    document.getElementById("EmailTextArea").value = data.email;
                    checkEmail(data.email);
                }
                else {
                    alert("Cannot load!");
                }
            });
        }
    </script>
    <script type="application/javascript">
        function saveUserInfo(usercurrent){
            $.getJSON('@{UsersController.saveUserInfoEdited()}', {
                'currentUser': document.getElementById("usercurrentHiddenInput").value,
                'username': document.getElementById("usercurrentHiddenInput").value,
                'newAddress': document.getElementById("addressTextArea").value,
                'newTheme': document.getElementById("dropdowndiv").value,
                'eMail': document.getElementById("EmailTextArea").value
            }, function(data){
            
            });
        }
    </script>
    <script type="text/javascript">
        var status = document.getElementById("status");
        var email = document.getElementById("EmailTextArea");
        
        function checkEmail(email){
            var regularEmail = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
            if (regularEmail.test(email) == false) {
                document.getElementById("status").src = "../../../public/images/no.png";
            }
            else {
                document.getElementById("status").src = "../../../public/images/ok.png";
            }
        }
    </script>

</head>
<body>
    <div id="content">
        <input type="button" id="editUserInformationBtn" value="Edit information" onClick="startEditing()"/>
        <br/>
        &nbsp;
        <br/>
        &nbsp;
        <table id="tableEditing" width="88%" border="1">
            <tr>
                <th width="15%" scope="row">
                    Address:
                </th>
                <td width="56%">
                    <input name="addressTextArea" id="addressTextArea" value="" type="text" size="50" />
                </td>
            </tr>
            <tr>
                <th scope="row">
                    Theme:
                </th>
                <td>
                    &nbsp; 
                    <select id="dropdowndiv">
                        <option>Regular</option>
                        <option>Blue</option>
                        <option>Red</option>
                    </select>
                </td>
            </tr>
            <tr>
                <th scope="row">
                    Image:
                </th>
                <td>
                    <input type="file" id="browseImg" name="datafile" size="38" />
                </td>
            </tr>
            <tr>
                <th scope="row">
                    Email:
                </th>
                <td>
                    <input name="EmailTextArea" id="EmailTextArea" value="" type="text" size="45" onKeyUp="checkEmail(this.value)" onmousedown="checkEmail(this.value)"/><img src="../../../public/images/no.png" alt="Status" width="20" height="20" id="status" style="margin-left: 5px;"/>
                </td>
            </tr>
            <tr>
                <th scope="row">
                    <label id="messsage">
                    </label>
                </th>
                <td width="56%">
                    &nbsp;&nbsp; <a href='#' id="updateAll" onclick="javascript:saveUserInfo(document.getElementById('usercurrentHiddenInput').value)">Submit
                        All</a>&nbsp;&nbsp;<a href='#' id="restoreAll" onclick="javascript:editUserInfo(document.getElementById('usercurrentHiddenInput').value)">Restore
                        All</a>&nbsp;&nbsp;<a href='#' id="doneEditing" onclick="javascript:finishEditing()">finish editing information</a>
                </td>
            </tr>
        </table>
        <p>
           
            <p>
                &nbsp;
            </p>
            </div>
            <input id="usercurrentHiddenInput" type="hidden" value="${usercurrent}" />
          
            <p>
            </p>
        </body>
